<template>
  <div class="mobile-period-setting common-mobile-view">
    <el-form ref="formRef" :model="periodStore.periodSetting"
             label-width="auto">
      <el-form-item label="周期天数">
        <el-input-number v-model="periodStore.periodSetting.cycleLength" autocomplete="off"
                  placeholder="请输入周期天数" clearable>
        </el-input-number>
      </el-form-item>

      <el-form-item label="持续天数">
        <el-input-number v-model="periodStore.periodSetting.duration" autocomplete="off"
                  placeholder="请输入持续天数" clearable>
        </el-input-number>
      </el-form-item>

      <el-form-item label="是否计算">
        <el-switch
            v-model="periodStore.periodSetting.isCalculate"
            active-text="是"
            inactive-text="否"
        />
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePeriodStore } from '@/store/period.ts'
import { useAppStore } from '@/store/app.ts'
import { onMounted, ref } from 'vue'

const formRef = ref()
const periodStore = usePeriodStore()
const appStore = useAppStore()

onMounted(async () => {
  appStore.isShowMobileBack = true
})

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await periodStore.updatePeriodSetting()
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}
</script>

<style scoped lang="scss">
.mobile-period-setting {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
